import folderIcon from '../../assets/imgs/folder.png'
import docIcon from '../../assets/imgs/doc.png'
import textIcon from '../../assets/imgs/text.png'
import unknown from '../../assets/imgs/unknown.png'

import './file-card.css'
import { Box, Checkbox } from '@mui/material'
import { useEffect, useRef, useState } from 'react'
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
function FileCard(props) {
    let file = props.file;
    let readOnly = props.readOnly !== undefined || props.readOnly !== null ? props.readOnly : false; 
    const [editMode, setEditMode] = useState(false);
    const [showCheckBox, setShowCheckBox] = useState(false);
    const [mouseLeave, setMouseLeave] = useState(true);
    
    const [lastFileName, setLastFileName] = useState(false);

    const [fileName, setFileName] = useState(file.fileName);
    let fileNameInput = useRef()    
    let icon;
    switch (file.type) {
        case 1:
            icon = folderIcon;
            break;
        default:
            switch (file.fileType) {
                case 1:
                    icon = textIcon;
                    break;
                case 2:
                    icon = docIcon;
                    break;
                default:
                    icon = unknown;
                    break;
            }
            break;
    }
    let handleClick = (e) => {
        if (props.onClick) {
          props.onClick(file);
        }
    };
    let firstClikc = false;
    function handleEdit(e) {
        if (firstClikc) {
            setEditMode(true)
        }
        firstClikc = true;
        setTimeout(() => firstClikc = false, 500)
    }
    function handleOnBlur(e) {
        if (editMode) {
            setEditMode(false)
            if (lastFileName !== fileName) {
                props.onFileNameChange(file, fileNameInput.current.value)
            }
        }
    }

    useEffect(()=> {
        if (editMode) {
            setLastFileName(fileNameInput.current.value)
        }
    }, 
    [editMode])

    useEffect(()=> {
        if (!file.selected && mouseLeave) {
            setShowCheckBox(false);
        }
    }, 
    [file.selected])
    

    const handleContextMenu = (event) => {
        if (props.onContextMenuOpen) {
            props.onContextMenuOpen(event)
        }
      };

    function handleFileSelected(e) {
        if (props.onFileSelected) {
            props.onFileSelected(file, e.target.checked)
        }
    }

    return (
        <Box onContextMenu={handleContextMenu} className='file-div' onMouseEnter={(e) => {setShowCheckBox(true); setMouseLeave(false)}}  onMouseLeave={(e) => {setMouseLeave(true);if (!file.selected) {setShowCheckBox(false);}}} >
            <Box className='file-icon-div' onClick={handleClick}>
                <img alt='icon' src={icon} className='file-icon'></img>
            </Box>
            <Box  className='file-name-div' sx={{fontSize: 'default'}}  >
                <input ref={fileNameInput} type='text' className='file-name-input' onClick={handleEdit} value={fileName} readOnly={readOnly || !editMode } onChange={(e) => setFileName(e.target.value)} onBlur={handleOnBlur} />
            </Box>
            { showCheckBox && <Checkbox {...label}  sx={{position:'absolute', top:'1px', right:'1px', padding:'0px'}} checked={file.selected} onChange={handleFileSelected} /> }
        </Box>
    );
}

export default FileCard;